<template>
  <div class="box">
    <div class="leftBox">
      <div ref="app" class="echarts"></div>
    </div>
    <div class="rightBox">
      <el-progress
        type="circle"
        :percentage="
          parseFloat(
            (
              ((itemDetials.emOnTime * 1) /
                (itemDetials.emOnTime +
                  itemDetials.emNoTime +
                  itemDetials.emNgTime +
                  itemDetials.emOffTime)) *
                100 || 0.0
            ).toFixed(2)
          )
        "
        color="#10FF9D"
        :width="190"
        define-back-color="#4E6881"
        text-color="#10FF9D"
      ></el-progress>
      <span>利用率</span>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "boxView2",
  props: {
    itemDetials: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  methods: {
    getdata() {
      var myChart = echarts.init(this.$refs.app);
      var option;
      let data = this.itemDetials;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "-2%",
          // bottom: "5%",
          textStyle: {
            // 图例的文本样式
            color: "#8993f2", // 图例的字体颜色
          },
        },

        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            minAngle: 15,
            avoidLabelOverlap: true, //是否启用防止标签重叠策略
            hoverAnimation: true, //是否开启 hover 在扇区上的放大动画效果。
            silent: true, //图形是否不响应和触发鼠标事件
            data: [
              {
                value: parseFloat((data.emOnTime / 3600).toFixed(2)) || 0,
                name: "运行",
                itemStyle: { color: "#10FF9D" },
              },
              {
                value: parseFloat((data.emNoTime / 3600).toFixed(2)) || 0,
                name: "待机",
                itemStyle: { color: "#FFBE00" },
              },
              {
                value: parseFloat((data.emNgTime / 3600).toFixed(2)) || 0,
                name: "故障",
                itemStyle: { color: "#E31E15" },
              },
              {
                value: parseFloat((data.emOffTime / 3600).toFixed(2)) || 0,
                name: "离线",
                itemStyle: { color: "#4D4D4D" },
              },
            ],
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}h",
                // minMargin: 5,
                textStyle: {
                  color: "#8993f2",
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 10, // 调整标签线长度
                smooth: 0.2, // 使标签线更平滑地接触饼图边缘
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getdata();
    });
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 580px;
  height: 330px;
  justify-content: space-around;
  align-items: center;
  // padding: 15px;
}
.echarts {
  width: 350px;
  height: 480px;
  margin-top: -20px;
}
.leftBox,
.rightBox {
  color: #8993f2;
  // padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.leftBox {
  height: 100%;
  width: 63%;
  align-items: center;
}
.rightBox {
  height: 85%;
  width: 40%;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  span {
    color: #10ff9d;
  }
}
.boxItem {
  display: flex;
  span {
    font-size: 18px;
    text-align: left;
  }
}
</style>
